Bootstrap 4: Conheça a biblioteca front-end mais utilizada no mundo
De Natan Souza
5/5
()
Sobre este e-book
Neste livro, Natan Souza ensinará como trabalhar com esta fantástica biblioteca em sua última versão 4 ao montar uma página do zero, a partir de um wireframe. Você verá seus principais componentes, como menu responsivo, grids, painéis e botões, além de aprender a customizar seu tema padrão e algumas boas práticas de HTML5, sempre levando em consideração a semântica do código.
Versões utilizadas: Bootstrap 4
Autores relacionados
Relacionado a Bootstrap 4
Ebooks relacionados
CSS Eficiente: Técnicas e ferramentas que fazem a diferença nos seus estilos Nota: 0 de 5 estrelas0 notasGuia Front-End: O caminho das pedras para ser um dev Front-End Nota: 5 de 5 estrelas5/5Vue.js: Construa aplicações incríveis Nota: 0 de 5 estrelas0 notasHTML5 e CSS3: Domine a web do futuro Nota: 4 de 5 estrelas4/5Aplicações web real-time com Node.js Nota: 5 de 5 estrelas5/5Desenvolvimento web com PHP e MySQL Nota: 3 de 5 estrelas3/5Desconstruindo a Web: As tecnologias por trás de uma requisição Nota: 0 de 5 estrelas0 notasColetânea Front-end: Uma antologia da comunidade front-end brasileira Nota: 0 de 5 estrelas0 notasJavaScript Assertivo: Testes e qualidade de código em todas as camadas da aplicação Nota: 0 de 5 estrelas0 notasSass: Aprendendo pré-processadores CSS Nota: 0 de 5 estrelas0 notasO retorno do cangaceiro JavaScript: De padrões a uma abordagem funcional Nota: 0 de 5 estrelas0 notasTurbine seu CSS: Folhas de estilo inteligentes com Sass Nota: 0 de 5 estrelas0 notasMySQL: Comece com o principal banco de dados open source do mercado Nota: 4 de 5 estrelas4/5ECMAScript 6: Entre de cabeça no futuro do JavaScript Nota: 5 de 5 estrelas5/5PHP e Laravel: Crie aplicações web como um verdadeiro artesão Nota: 0 de 5 estrelas0 notasProgressive Web Apps: Construa aplicações progressivas com React Nota: 3 de 5 estrelas3/5Primeiros passos com Node.js Nota: 0 de 5 estrelas0 notasAPIs REST: Seus serviços prontos para o mundo real Nota: 5 de 5 estrelas5/5Construindo APIs REST com Node.js: Caio Ribeiro Pereira Nota: 5 de 5 estrelas5/5ASP.NET Core MVC: Aplicações modernas em conjunto com o Entity Framework Nota: 5 de 5 estrelas5/5Design Patterns com PHP 7: Desenvolva com as melhores soluções Nota: 5 de 5 estrelas5/5Guia prático de TypeScript: Melhore suas aplicações JavaScript Nota: 0 de 5 estrelas0 notasJava 9: Interativo, reativo e modularizado Nota: 0 de 5 estrelas0 notasProgramação funcional em .NET: Explore um novo universo Nota: 0 de 5 estrelas0 notasOrientação a Objetos em C#: Conceitos e implementações em .NET Nota: 5 de 5 estrelas5/5Front-end com Vue.js: Da teoria à prática sem complicações Nota: 5 de 5 estrelas5/5Angular 11 e Firebase: Construindo uma aplicação integrada com a plataforma do Google Nota: 0 de 5 estrelas0 notasO guia de Dart: Fundamentos, prática, conceitos avançados e tudo mais Nota: 3 de 5 estrelas3/5Desenvolvimento web com ASP.NET MVC Nota: 0 de 5 estrelas0 notasDo PHP ao Laminas: Domine as boas práticas Nota: 3 de 5 estrelas3/5
Internet e Web para você
Programação Web avançada com PHP: Construindo software com componentes Nota: 0 de 5 estrelas0 notasCrimes cibernéticos: ameaças e procedimentos de investigação - 2ª Edição Nota: 5 de 5 estrelas5/5Flask de A a Z: Crie aplicações web mais completas e robustas em Python Nota: 4 de 5 estrelas4/5Liberdade digital: O mais completo manual para empreender na internet e ter resultados Nota: 5 de 5 estrelas5/5SEO Prático: Seu site na primeira página das buscas Nota: 0 de 5 estrelas0 notasManual do social media: Os 7 segredos para o sucesso nas mídias sociais para pequenas empresas Nota: 0 de 5 estrelas0 notasIntrodução e boas práticas em UX Design Nota: 5 de 5 estrelas5/5Inteligência Digital Nota: 5 de 5 estrelas5/5Construindo um Blog de sucesso com o WordPress 3 Nota: 0 de 5 estrelas0 notasProgressive Web Apps: Construa aplicações progressivas com React Nota: 3 de 5 estrelas3/5Cibersegurança: Visão Panorâmica Sobre a Segurança da Informação na Internet Nota: 0 de 5 estrelas0 notasComputação comunicação e controle: Silvio Meira no NO Nota: 0 de 5 estrelas0 notasRoadmap back-end: Conhecendo o protocolo HTTP e arquiteturas REST Nota: 5 de 5 estrelas5/5Desconstruindo a Web: As tecnologias por trás de uma requisição Nota: 0 de 5 estrelas0 notasAPIs REST em Kotlin: Seus serviços prontos para o mundo real Nota: 0 de 5 estrelas0 notasComo ganhar dinheiro com aplicativos Nota: 3 de 5 estrelas3/5Fundamentos de Segurança da Informação: com base na ISO 27001 e na ISO 27002 Nota: 5 de 5 estrelas5/5Spring Boot: Acelere o desenvolvimento de microsserviços Nota: 0 de 5 estrelas0 notasAmazon AWS: Descomplicando a computação na nuvem Nota: 5 de 5 estrelas5/5APP para iniciantes: Faça seu primeiro aplicativo Low Code Nota: 0 de 5 estrelas0 notasColetânea Front-end: Uma antologia da comunidade front-end brasileira Nota: 0 de 5 estrelas0 notasBriefing: a gestão do projeto de design Nota: 0 de 5 estrelas0 notasSegurança em aplicações Web Nota: 0 de 5 estrelas0 notas73 Incríveis tipos de postagens de blog que você pode escrever hoje Nota: 2 de 5 estrelas2/5Primeiros passos com Node.js Nota: 0 de 5 estrelas0 notasAPIs REST: Seus serviços prontos para o mundo real Nota: 5 de 5 estrelas5/5Dominando o Podcasting Nota: 0 de 5 estrelas0 notas
Avaliações de Bootstrap 4
4 avaliações0 avaliação
Pré-visualização do livro
Bootstrap 4 - Natan Souza
Sumário
1. O projeto Better
2. Destacando o que deve ser destacado
3. Entendendo as grids do Bootstrap
4. Flexbox, agora no Bootstrap
5. Media, um componente atualizado
6. Cartas na mesa: brincando com o card
7. Classes semânticas e CSS mais leve
8. Conselhos e dicas
Capítulo 1
O projeto Better
Neste livro, criaremos juntos um projeto do começo ao fim usando o Bootstrap 4 e seus principais componentes, como menu responsivo, grids, painéis etc. Além de customizar o tema padrão, usaremos boas práticas de HTML5 levando em consideração a semântica do nosso código e teremos a performance do projeto como um ponto a ser pensado.
Nosso cliente, Vasco Nakombi, possui um projeto chamado Better, um banco de imagens pago, no qual o usuário pode baixar determinadas fotos de graça, mas precisa pagar por outras. No briefing minimalista passado por Vasco, foi determinado que rápido e responsivo
devem ser os pilares para toda decisão que envolva o desenvolvimento da plataforma, logo, já foi descartado fazer pesquisa de público-alvo ou mesmo qualquer dinâmica de UX.
Além disso, o wireframe já foi aprovado e devemos segui-lo fielmente. Precisamos de algo que seja rápido e fácil de usar.
Wireframe Home BetterFigura 1.1: Wireframe Home Better
Você pode acessar esse wireframe nesse link: https://github.com/designernatan/livro-bootstrap4/blob/master/wireframe-home.png
Além da home, por solicitação do cliente, precisaremos criar a página de cadastro e a página de login. A Better ainda não possui um site funcional com HTML/CSS, e o designer responsável por fazer a parte da criação foi demitido. Como podemos proceder, sendo que, na equipe, temos apenas programadores back-end com conhecimento básico de front-end? E quanto ao design? Talvez, a saída seja fazer um curso online na Alura, ou ler um livro de front-end da Casa do Código.
Porém, qual era um dos itens primordiais para o cliente? Tempo! Assim, não temos tempo nem budget para instruir os programadores. Eis que surge a cavalaria: o Bootstrap.
Como dito na introdução deste livro, o Bootstrap é um framework CSS repleto de componentes prontos e reutilizáveis. Podemos usá-lo para ganhar tempo e deixar os programadores focados em programar de fato.
Framework ou biblioteca?
Primeira curiosidade: em suas versões alpha e beta, o Bootstrap 4 considerava-se um framework. Já na sua versão final, o termo escolhido mudou para biblioteca.
Há diversas discussões na internet com argumentos realmente fascinantes, mas não me prenderei muito a terminologias aqui, pois, se o próprio Bootstrap mudou a forma de se chamar, quem sou eu para argumentar algo contra?
Primeiramente, teremos de preparar nosso ambiente de desenvolvimento. Acredito que você, leitor, provavelmente possua uma IDE preferida; eu usarei o Sublime Text, mas sinta-se à vontade para usar o seu editor de texto do coração, seja Brackets, Atom, Visual Studio Code, VIM etc.
No link a seguir, baixe os arquivos do projeto (30 MB) que usaremos no decorrer do seu desenvolvimento e descompacte todo o seu conteúdo em alguma pasta, seja no Desktop ou em uma pasta do seu Dropbox, por exemplo: https://github.com/designernatan/livro-bootstrap4.
Outras pastas
No mesmo repositório, você poderá encontrar os projetos finais de cada capítulo, devidamente identificados.
Agora pegue a pasta projeto-better e abra-a em seu editor de texto. Depois, abra o arquivo index.html para começarmos a editar seu código. Perceba que o que já consta no arquivo é a estrutura básica de um HTML:
pt-br>
UTF-8>
viewport content=width=device-width
>
Onde baixo o Bootstrap?
Se você quiser baixar o Bootstrap 4 (e até versões anteriores), basta acessar seu site principal, que também contém toda a sua documentação: https://getbootstrap.com/.
Quando vamos fazer uma redação, normalmente começamos, bem... Do começo. Logo, faremos o mesmo com o projeto, começando do topo. Vamos partir da estrutura básica do menu de navegação:
Wireframe do menu de navegaçãoFigura 1.2: Wireframe do menu de navegação
Um menu de navegação desse tipo consiste basicamente em uma lista não ordenada com vários itens de lista, sendo cada um deles um link. Vamos fazer o código dentro do desta forma:
Não se preocupe com as URLs dos links, vamos alterá-las em capítulos posteriores. Abrindo a página no browser, não teremos nada muito bonito:
Menu sem estiloFigura 1.3: Menu sem estilo
Poderíamos criar regras CSS para estilizar esse menu e colocar um display: inline nessas
stylesheet href=/css/bootstrap.css
>
Feito isso, abrindo no browser:
Menu com Bootstrap importadoFigura 1.4: Menu com Bootstrap importado
Repare que, mesmo sem mudar nenhum elemento de estrutura nem colocar nenhum tipo de classe, o resultado final ficou diferente. Os links estão com um tom de azul mais tênue, e até mesmo a tipografia foi alterada, além dos espaçamentos que foram modificados.
Mas como aproximar ainda mais do resultado esperado? Como deixar o menu na horizontal conforme o wireframe passado usando o Bootstrap? Talvez, possamos usar um elemento do HTML5 que traga mais semântica? Vamos tentar isso com o elemento
Testando no browser, nada muda. Isso se deve ao fato de que o mais semântica. Perceba que a semântica do código depende unicamente do desenvolvedor que está codando, e não do framework. Agora como será que o Bootstrap trata menus?
Esse fantástico framework possui classes específicas para fazer menu de navegação, como também componentes prontos que nos auxiliam nessa tarefa. Um desses componentes é o chamado navbar. Mas como utilizá-lo? Precisaremos aprender alguma linguagem back-end, como Java ou PHP?
Nada disso! Vamos relembrar que o Bootstrap é basicamente um CSS, logo, para usarmos seus componentes prontos, basta sabermos os nomes das classes que ele possui e aplicá-las em nosso HTML.
Como saber o nome dessas classes? Basta abrir o arquivo bootstrap.css, localizado na pasta css, e procurar nas mais de seis mil linhas de código. Será que não existe algum